<template>
  <div class="pie" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'PieCharts',
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      const pieUnit = '万';
      const pieData = [
        { statType: '01', name: '0-30分钟', value: 31, color: '#69DDF1' },
        { statType: '02', name: '30-60分钟', value: 20, color: '#79CE9B' },
        { statType: '03', name: '1-2小时', value: 10, color: '#E89B42' },
        { statType: '04', name: '2-3小时', value: 88, color: '#EE7165' },
        { statType: '05', name: '3-5小时', value: 23, color: '#713AEA' },
        { statType: '06', name: '5小时以上', value: 100, color: '#6732E3' },
      ];

      // 饼图数据处理
      const pieDataHandle = function (data) {
        data.sort((a, b) => b.value - a.value);
        data.map((item) => {
          return { value: item.value, name: item.name };
        });
        return data;
      };

      const option = {
        // 颜色配置
        color: pieData.map((el) => el.color),
        legend: {
          show: true,
          // 图例形状
          icon: 'rect', // 修改为方块
          orient: 'vertical', // 设置图例的方向
          top: 'center', // 居中
          left: '5%',
          itemWidth: 18,
          itemHeight: 18,
          itemGap: 10,
          data: pieData.map((el) => el.name),
          textStyle: {
            padding: [0, 0, 0, 10],
            fontSize: 16,
            color: '#40C5F1',
          },
        },
        series: [
          {
            type: 'pie',
            roseType: 'radius',
            radius: ['20%', '70%'],
            center: ['65%', '50%'],
            // 处理数据，进行排序
            data: pieDataHandle(pieData),
            hoverAnimation: false,
            itemStyle: {
              normal: { borderWidth: 1 },
            },
            labelLine: {
              length: 0,
            },
            label: {
              show: true,
              padding: [0, 20, 0, 0],
              // 展示所有标签
              formatter: (params) => {
                if (params.name) {
                  return '{name|' + params.name + '}';
                }
              },
              rich: {
                name: { fontSize: 16, color: '#a6e4ff' },
              },
            },
            emphasis: {
              focus: 'self', //其他虚化
              label: {
                show: true,
                padding: [0, 10, 0, 0],
                // 展示所有标签
                formatter: (params) => {
                  return [
                    `{aName|${params.name}}\n` +
                      `{household|${params.value}${pieUnit}}` +
                      `{discount|人数}\n\n` +
                      `{household|${
                        (params.data.discdDmdElecAmt, 2)
                      }${pieUnit}}` +
                      `{discount|消费}`,
                  ];
                },
                rich: {
                  aName: {
                    // 名称的字体样式
                    fontSize: 16,
                    color: '#a6e4ff',
                    padding: [0, 0, 0, 0],
                  },
                  household: {
                    // 户数的字体样式
                    fontSize: 18,
                    color: '#fff',
                    padding: [0, 0, 0, 0],
                  },
                  discount: {
                    fontSize: 16,
                    color: '#a6e4ff',
                    padding: [0, 0, 0, 0],
                  },
                },
              },
              itemStyle: {
                shadowBlur: 30,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                borderColor: '#000',
                borderWidth: 1,
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: center;
  height: 100%;
}
.pie {
  width: 100%;
  height: 280px;
}
</style>
